<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator class="goods-item" v-for="item in goodsList" :key="item.goods_id"
      :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`">
        <image lasy-load :src="item.goods_small_logo || defaultSrc" class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
    <view class="tips" v-if="total === goodsList.length && total !==0">没有更多数据了</view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      //查询参数
      queryParams: {},
      //商品总数
      total: 0,
      // 商品列表
      goodsList: [],
      defaultSrc: 'https://img0.baidu.com/it/u=324754129,1809452373&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500'
    };
  },
  onLoad(options) {
    this.queryParams = {
      ...options,
      pagenum: 1,
      pagesize: 20
    }
    this.getGoodsList()
  },
  //页面触发底部事件
  onReachBottom(){
    console.log("页面触底了");
    //判断是否有下一页数据
    if(this.goodsList.length<this.total){
      //页码加1
      this.queryParams.pagenum++
      this.getGoodsList()
    }else{
      uni.showToast({
        icon:"none",
        title:"我也是有底线的~"
      })
    }
  },
  //下拉刷新事件
 async onPullDownRefresh(){
//重置数据
this.queryParams.pagenum=1
this.goodsList=[]
this.total=0
//重发请求
await this.getGoodsList()
//关闭下拉刷新
uni.stopPullDownRefresh();
  },
  methods: {
    async getGoodsList() {
      const res = await uni.$u.http.get('/goods/search', {
        params: this.queryParams
      })
      console.log(res);
      //列表数据保存在message下的goods里面
      this.goodsList.push(...res.data.message.goods)
      this.total = res.data.message.total
    }
  }
};
</script>
  
<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;

    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }

    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;

      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-price {
        color: #eb4450;

        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
.tips{
  text-align: center;
  color: #999;
  line-height: 80rpx;
  font-size: 12px;
}
</style>